<template>
  <div class="container">
    <div class="header">
      <div>
        <router-link to='/index111'>
          <label>〈</label>
        </router-link>
      </div>
      <div><span>患者充值</span></div>
      <div><button @click="drawer = true">充值</button></div>
    </div>
    <div class="context">
      <el-table
        :data="tableData">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="电话" prop="phone"></el-table-column>
        <el-table-column label="金额" prop="money"></el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="充值"
      width="85%"
      :visible.sync="drawer"
      :direction="direction">
      <div class="drawers">
        <div>
          <span>充值金额</span><el-input class="d_input " v-model="money" ></el-input>
        </div>
        <div>
          <span>是否充值？</span><el-checkbox v-model="isno"></el-checkbox>
        </div>
        <div>
          <span>用户搜索</span><el-input class="d_input" v-model="name" placeholder="用户搜索"></el-input>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="电话" prop="phone"></el-table-column>
          <el-table-column label="金额" prop="money"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'recharge',
    data() {
      return {
        name:'',
        isNo:'',
        phone:'',
        drawer: false,
        direction: 'ttb',
        tableData:[
          {
            name: '小明',
            phone: '12345678910',
            money: 14500
          },{
            name: '小黑',
            phone: '12345678910',
            money: 14500
          },
        ]
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .header {
    width: 100%;
    height: 36px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: center;
    background-color: #00afff;
    color: white;
  }

  .header div {
    width: 20%;
    margin-top: auto;
    margin-bottom: auto;
  }
  .header div button{
    border: none;
    background-color: #00afff;
    color: white;
  }
  .context {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
  }

  .drawers div{
    display: flex;
    flex-direction: row;
    align-items:center;
    margin-top: 9px;
  }
  .drawers div .d_input{
    width: 70%;
  }

</style>

